<template>
	<view class="conatiner">
		<view class="header">
			<view class="bg">
				<image class="img" src="@/static/images/mine_bg.jpg"></image>
			</view>
			<view class="profile">
				<view class="avatar">
					<image class="pic" :src="avatarUrl"></image>
					<image class="adrift" src="@/static/images/mine_pen.png" @click="handleUploadImage"></image>
				</view>
				<view class="info">
					<view class="user">{{ nickName }}</view>
					<view class="tag">
						<image class="logo" src="@/static/images/mine_boss.png"></image>
						<text>{{ roleName }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="section">
			<view class="article">
				<view class="card">
					<image class="base-img" src="@/static/images/mine_banner_bg.png"></image>
					<view class="rove">
						<view class="title">所有店铺管理</view>
						<button class="action" @click="navigateTo('/pages/shops/storeManagement')">查看</button>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" @click="navigateTo(`/pages/businessManagement/recharge?storeId=${storeId}`)">
					<view class="group">
						<image class="logo" src="@/static/images/mine_yqhy.png"></image>
						<text>平台充值</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="item" @click="navigateTo(`/pages/businessManagement/generatePoster?storeId=${storeId}`)">
					<view class="group">
						<image class="logo" src="@/static/images/mine_yqhy.png"></image>
						<text>邀请好友</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="item" @click="navigateTo('/pages/mine/accountSecurity')">
					<view class="group">
						<image class="logo" src="@/static/images/mine_zhaq.png"></image>
						<text>账户与安全</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="item" @click="navigateTo('/pages/mine/feedback')">
					<view class="group">
						<image class="logo" src="@/static/images/mine_yjfk.png"></image>
						<text>意见反馈</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="item" @click="navigateTo('/pages/mine/aboutus')">
					<view class="group">
						<image class="logo" src="@/static/images/mine_gywm.png"></image>
						<text>关于我们</text>
					</view>
					<view class="arrow"></view>
				</view>
				<view class="item">
					<view class="group">
						<image class="logo" src="@/static/images/mine_bbgx.png"></image>
						<text>版本更新</text>
					</view>
					<view class="arrow"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { changeAvatar } from '@/api/index'
import { navigateTo } from '@/utils/navigator'
import { chooseImage } from '@/utils/common'
import { roleTypeMap } from '@/common/js/maps'
import eventEmitter from '@/utils/eventEmitter'
import userInfo from '@/common/js/userInfo'

const { infomation: { storeId, nickName, storeTypeRole } } = userInfo
const roleName = ref('')
const roleTypes = [
	{ text: '老板', value: roleTypeMap.LEADER },
	{ text: '员工', value: roleTypeMap.STAFF },
	{ text: '零时工', value: roleTypeMap.TEMPORARY_WORKER },
	{ text: '店长角色', value: roleTypeMap.SHOPKEEPER },
	{ text: '财务', value: roleTypeMap.FINANCES }
]
const avatarUrl = ref(userInfo.infomation.avatar)

const handleUploadImage = async () => {
	try {
		const { tempFilePaths } = await chooseImage({ count: 1 })
		uni.showLoading({ title: '图片上传中', mask: true })
		if (tempFilePaths) {
			const { code, imgUrl } = await changeAvatar(tempFilePaths[0])
			if (code == 200 && imgUrl) {
				const userInfoClone = Object.assign(userInfo.infomation)
				userInfoClone.avatar = imgUrl
				uni.setStorageSync('userInfo', JSON.stringify(userInfoClone))
				eventEmitter.emit('STORAGE:USERINFO_CHANGE')
				avatarUrl.value = userInfo.infomation.avatar
			}
		}
	} catch (error) {
		uni.showToast({ title: error || '上传失败，请重试', icon: 'none' })
	} finally {
		uni.hideLoading()
	}
}

onLoad(() => {
	roleName.value = roleTypes.find(({ value }) => value === Number(storeTypeRole))?.text || ''
})
</script>

<style lang="scss">
	.conatiner {
		height: 100vh;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;

		.header {
			position: relative;

			.bg {
				height: 419rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.profile {
				position: absolute;
				left: 32rpx;
				bottom: 95rpx;
				display: flex;

				.avatar {
					position: relative;
					width: 112rpx;
					height: 112rpx;

					.pic {
						height: 100%;
						border-radius: 50%;
					}

					.adrift {
						position: absolute;
						right: 8rpx;
						bottom: 0;
						width: 32rpx;
						height: 32rpx;
					}
				}

				.info {
					margin-left: 16rpx;

					.user {
						font-size: 48rpx;
						color: #222;
					}

					.tag {
						margin-top: 14rpx;
						width: 96rpx;
						height: 32rpx;
						background: linear-gradient(90deg, #FFF3E2 0%, #FFE3CB 100%);
						box-shadow: 0rpx 2rpx 4rpx 1rpx #CFE3F8;
						border-radius: 16rpx;
						display: flex;
						align-items: center;

						.logo {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}

						text {
							font-size: 20rpx;
							color: #FA8045;
						}
					}
				}
			}
		}

		.section {
			padding-top: 40rpx;
			background-color: #fff;
			position: relative;
			top: -60rpx;
			border-radius: 40rpx 40rpx 0 0;

			.article {
				padding: 0 32rpx;

				.card {
					position: relative;
					height: 116rpx;

					.base-img {
						width: 100%;
						height: 100%;
					}

					.rove {
						padding: 32rpx;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 32rpx;
							color: #222;
						}

						.action {
							margin: 0;
							font-size: 28rpx;
							color: #222;
							border: 1rpx solid #707070;
							width: 152rpx;
							height: 52rpx;
							line-height: 52rpx;
							background-color: transparent;
							transition: transform .1s ease;

							&::after {
								border: none;
							}

							&:active {
								transform: scale(0.9);
							}
						}
					}
				}
			}

			.list {
				margin-top: 10rpx;
				padding-left: 32rpx;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 109rpx;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 72rpx;
						right: 0;
						bottom: 0;
						height: 1rpx;
						background-color: #C6C6C6;
					}

					.group {
						display: flex;
						align-items: center;

						.logo {
							width: 52rpx;
							height: 52rpx;
						}

						text {
							margin-left: 24rpx;
							font-size: 32rpx;
							color: #222;
						}
					}

					.arrow {
						margin-right: 32rpx;
						width: 16rpx;
						height: 16rpx;
						border-right: 4rpx solid #C6C6C6;
						border-top: 4rpx solid #C6C6C6;
						transform: rotate(45deg);
						transform-origin: center;
					}
				}
			}
		}
	}
</style>